<!-- page content -->
<div id="myVue" class="right_col" role="main">
	<h3>This is Vue test page.</h3>
	<p>========= 数据单项绑定 ========</p>
	<h4>{{company}}</h4>
	<p><span style="color: red;">{{commanyError}}</span></p>
	<p>{{user.name | filter1 | filter2}}</p>
	<p>{{nameComputed}}</p>
	<p><span style="color: red;">{{userNameError}}</span></p>
	<p>{{user.age}}</p>
	<p>{{user.gender}}</p>
	<p>{{user.roles}}</p>
	<p>{{user.city}}</p>
	<form>
		<input type="text" :value="user.name" />
	</form>
	<p>========= 数据双项绑定 && 列表渲染 ========</p>
	<form>
		<p><input type="text" v-model.trim="company" /></p>
		<p><input type="text" v-model.trim="user.name" /></p>
		<p><input type="number" v-model.number="user.age" /></p>
		<p>
			<span v-for="item in genders"
				><input type="radio" :value="item" :key="item" v-model="user.gender" /> {{item}}</span
			>
		</p>
		<p>
			<span v-for="item in roles">
				<input type="checkbox" :value="item.id" :key="item.id" v-model="user.roles" /> {{item.name}}
			</span>
		</p>
		<p>
			<select v-model="user.city">
				<option v-for="(item, index) in cities" :value="item.id" :key="item.id">{{item.name}} -- {{index}}</option>
			</select>
		</p>
        <p>
            <ul>
                <li v-for="item in cities" id="item.id" :key="item.id">{{item.name}}</li>
            </ul>
        </p>
        <p>
            <table>
                <tr><td>ID</td><td>Name</td></tr>
                <tr v-for="item in cities"><td>{{item.id}}</td><td>{{item.name}}</td></tr>
            </table>
        </p>
	</form>
	<p>========= 条件渲染 ========</p>
	<p><span v-if="user.name == 'hujiang'">今天是个好天气.</span></p>
	<p><span v-show="user.name == 'jianghu'">今天是不个好天气.。。。。。。。</span></p>
    <p>========= 事件绑定 ========</p>
    <p>
        <button @click="test1()">test1</button>
    </p>
    <p>
        <button name="btn" data="qqqqdcdwcqwcq" @click="test2($event)">Test2</button>
    </p>
	<p>========= 动画 ========</p>
	<p><button @click="show = !show">点击改变动画</button></p>
	<transition name="fade"><p v-show="show">显示动画</p></transition>
</div>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
</style>

<script>
	$(function() {
		alert("1111111111");
		test1();
	});

	Vue.filter("filter1", function(value) {
		if (!value) {
			return "";
		}
		return value.replaceAll("a", "*");
	});

	var myVue = new Vue({
		el: "#myVue",
		data: {
			company: "SFAC",
			commanyError: "",
			user: {
				name: "Hujiang",
				age: 18,
				gender: "male",
				roles: [],
				city: 2,
			},
			userNameError: "",
			roles: [
				{ id: 1, name: "admin" },
				{ id: 2, name: "manager" },
				{ id: 3, name: "staff" },
			],
			genders: ["male", "female"],
			cities: [
				{ id: 1, name: "chengdu" },
				{ id: 2, name: "chongqing" },
				{ id: 3, name: "wuhan" },
				{ id: 4, name: "nanjing" },
				{ id: 5, name: "shanghai" },
			],
			show: true,
		},
		methods: {
			test1: function () {
				console.log("This is test 1 function.");
			},
			test2: function (event) {
                console.log(event.currentTarget.name);
                console.log(event.currentTarget.attributes.data.value);
			},
		},
		watch: {
			company(newValue, oldValue) {
				this.commanyError = newValue.length > 6 ? "公司名太长" : "";
			},
			'user.name'(newValue, oldValue) {
				this.userNameError = newValue.length > 6 ? "用户名太长" : "";
			},
		},
		computed: {
			nameComputed: function() {
				return this.user.name.toUpperCase();
			}
		},
		filters: {
			filter2: function(value) {
				if (!value) {return "";}
				return value.replaceAll("b", "-");
			}
		},
		// Vue 实例初始化完成
		created () {
			window.test1 = this.test1;
		},
		// vew 实例加载完成，并且和页面元素绑定成功
		mounted () {
			this.test1();
		}
	});

</script>
